<template>
    <div class="top">
        <RouterLink :to="item.path" v-for="item in todoRoute" class="font" activeClass="active">{{ item.meta.name }}</RouterLink>
    </div>
</template>

<script setup lang="ts">
let props = defineProps(['route'])
let todoRoute = props.route.matched[1].children.filter(item=>item.meta.littleShow)
</script>

<style scoped lang="less">
.top{
    width: 100%;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 3px solid rgb(233, 233, 233);
    box-shadow: 3px 0px 8px 1px rgb(233, 233, 233);
    background:  rgb(249, 249, 249);
    font-family: '微软雅黑 Bold', '微软雅黑', '微软雅黑', sans-serif;
    font-weight: 700;
    font-style: normal;
    .font{
        color: black;
    }
    .active{
        color: rgb(0, 121, 254);
    }
}
</style>